<template>
  <view>
    <view class="u-p-24">
      <view class="search-bar">
        <image src="../../static/icons/sousuo.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
        <view class="u-m-16" style="width: 4rpx; height: 36rpx; background: #e6dcd2;"></view>
      </view>
    </view>
    
    <view class="u-p-l-24 u-p-r-24 u-p-b-16">
      <u-tabs :list="tabs" :is-scroll="false" :current="current" bg-color="transparent" inactive-color="#FFD9B2"
        active-color="#FFD9B2" @change="change"></u-tabs>
    </view>

    <view class="u-p-t-24 f-center">
      <image class="pic" src="https://picsum.photos/id/646/300/300" mode="aspectFill"></image>
    </view>
    
    <paixu></paixu>
    
    <view class="u-p-24 flex-row justify-between flex-wrap" v-show="current == 0">
      <good v-for="i in 5" :key="i" @click.native="$goto('/pages/shop/good')"></good>
    </view>

    <view class="u-p-24" v-show="current == 1">
      <view class="gap-24" v-for="i in 5" :key="i" @click.native="$goto('/pages/shop/index')">
        <shop></shop>
      </view>
    </view>
  </view>
</template>

<script>
  import good from '../huiyuan/components/good.vue'
  import shop from '../huiyuan/components/shop.vue'
  import paixu from './components/paixu.vue'
  export default {
    components: {
      good,
      shop,
      paixu
    },
    data() {
      return {
        tabs: [{
            name: '商品'
          },
          {
            name: '门店'
          }
        ],
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
        this.getData(true);
      },
    }
  }
</script>

<style lang="scss">
  page {
    background: #202226;
  }
  
  .search-bar {
    width: 702rpx;
    height: 60rpx;
    background: #FFFFFF;
    border-radius: 30rpx;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
  }

  .pic {
    width: 702rpx;
    height: 300rpx;
    object-fit: cover;
    background: #FFFFFF;
    border-radius: 20rpx;
  }
</style>
